{% extends "forum/forum_home.html" %}
{% block page_link %}
    <script src="../../static/personal_center/js/echarts.js"></script>
{% endblock %}

{% block style %}
    <style>
        .add_class {
            background: #1E90FF;
        }
        .survey_title:hover {
            background: #f7f7f7;
        }
        .empty {
            width: 200px;height: 35px;letter-spacing: 10px;background: #DFDFDF;border: #DFDFDF solid 1px;
        }
        .empty:hover {
            background: #cecece;
        }
        .presentation {
            width: 200px;height: 35px;margin-left: 20px;letter-spacing: 10px;background: #00a0e9;border: #00a0e9 solid 1px;color: white;
        }
        .presentation:hover {
            background: #0c6fd9;
        }
    </style>
{% endblock %}
{% block right_content %}
    <div style="width: 100%;height: 100%;background: white;font-size: 0;">
        <div style="width: 20%;height: 100%;border-right: #cfcfcf solid 1px;display: inline-block;vertical-align: top;font-size: 14px;">
            <div style="width: 100%;height: 40px;line-height: 40px;padding-left: 2%;color: white;background: #2db7f5;letter-spacing: 2px;">调研问卷列表</div>
            <div style="width: 100%;height: 95%;overflow: auto;">
                {% if left_list|length %}
                    {% for left in left_list %}
                        <div class="survey_title" style="width: 100%;height: 40px;line-height: 40px;letter-spacing: 1.5px;cursor: pointer;padding-left: 1.5%;{% if left.id == flow_id %}background: #cfcfcf;{% endif %}" onclick="window.location.href='/forum/SurveyQuestionnaire.html?id={{ left.id }}'">
                            {{ left.title }}
                        </div>
                    {% endfor %}
                {% else %}
                    <div style="width: 100%;height: 100%;text-align: center;letter-spacing: 3px;font-size: 14px;padding-top: 50%;background: white;color: #cfcfcf;">
                        <img src="../../static/personal_center/img/暂无资源.png" alt="" style="width: 120px;height: 120px;margin-top: 30px;">
                        <p>暂无数据</p>
                    </div>
                {% endif %}
            </div>
        </div>

        <div style="width: 79.5%;height: 100%;border-right: #cfcfcf solid 1px;display: inline-block;vertical-align: top;font-size: 14px;">
            {% if obj_flag %}
                <div style="width: 100%;height: 95%;overflow: auto;">
                    <div style="width: 100%;height: 200px;line-height: 200px;text-align: center;letter-spacing: 3px;font-size: 30px;">
                        <strong>{{ obj.title }}</strong>
                    </div>
                    <div style="width: 100%;padding-left: 20%;padding-right: 20%;text-indent: 4ch;line-height: 30px;">
                        {{ obj.illustrate }}
                    </div>
                    <div style="width: 100%;margin-top: 20px;">
                        {% for foo in option_json %}
                            <div style="width: 100%;padding-left: 20%;padding-right: 20%;text-indent: 6ch;line-height: 30px;">
                                <strong>{{ foo.title }}{% if foo.type == 'a' %}【单选】{% elif foo.type == 'b' %}【多选】{% else %}【文本】{% endif %}</strong>
                            </div>
                            {% if foo.type == 'a' %}
                                {% for opt in foo.option %}
                                    <div style="width: 100%;padding-left: 20%;padding-right: 20%;text-indent: 10ch;line-height: 30px;">
                                        <input type="radio" name="{{ foo.Serial }}-name" data-value="{{ opt.id }}" {% if opt.checked == "true" %}checked{% endif %}> {{ opt.option }}
                                    </div>
                                {% endfor %}
                            {% elif foo.type == 'b' %}
                                {% for opt in foo.option %}
                                    <div style="width: 100%;padding-left: 20%;padding-right: 20%;text-indent: 10ch;line-height: 30px;">
                                        <input type="checkbox" name="{{ foo.Serial }}-name" data-value="{{ opt.id }}" {% if opt.checked == "true" %}checked{% endif %}> {{ opt.option }}
                                    </div>
                                {% endfor %}
                            {% else %}
                                <div style="width: 100%;padding-left: 20%;padding-right: 20%;text-indent: 10ch;line-height: 30px;">
                                    <textarea name="" id="{{ foo.Serial }}-name" style="width: 100%;height: 200px;">
                                        {{ opt.text }}
                                    </textarea>
                                </div>
                            {% endif %}
                        {% endfor %}
                    </div>
                </div>
                <div style="width: 100%;height: 5%;text-align: center;">
                    <button class="empty" onclick="empty_option()">清空</button>
                    <button class="presentation" onclick="summit_option()">提交</button>
                </div>
            {% else %}
                <div style="width: 100%;text-align: center;letter-spacing: 3px;font-size: 14px;padding-top: 20%;background: white;color: #cfcfcf;">
                    <img src="../../static/personal_center/img/暂无资源.png" alt="" style="width: 120px;height: 120px;">
                    <p>暂无数据</p>
                </div>
            {% endif %}
        </div>
    </div>
{% endblock %}

{% block script %}
    <script>
        window.onload = function () {
            document.getElementById("loading").style.display = "none";
            document.getElementById("forum").className = "add_class";
            document.getElementById("survey").className = "add-nav-active";
        };

        var option_json = {{ option_json | safe }};
        function empty_option() {
            for (var i=0; i<option_json.length; i++) {
                if (option_json[i]["type"] === "c"){
                    document.getElementById(option_json[i]["Serial"]+"-name").value = "";
                }else {
                    var name_list = document.getElementsByName(option_json[i]["Serial"]+"-name");
                    for (var j=0; j<name_list.length; j++) {
                        name_list[j].checked = false
                    }
                }
            }
        }

        function summit_option() {
            var option_list = []
            for (var i=0; i<option_json.length; i++) {
                if (option_json[i]["type"] === "c"){
                    option_list.push({"id": option_json[i]["id"], "option": document.getElementById(option_json[i]["Serial"]+"-name").value})
                    if (!document.getElementById(option_json[i]["Serial"]+"-name").value) {
                        alert("有文本类调研项目未填写，请填写完整！")
                        return false
                    }
                }else {
                    var name_list = document.getElementsByName(option_json[i]["Serial"]+"-name");
                    var check_list = [];
                    for (var j=0; j<name_list.length; j++) {
                        if (name_list[j].checked) {
                            check_list.push(name_list[j].getAttribute("data-value"))
                        }
                    }
                    if (check_list.length === 0) {
                        alert("调研项目未选择，请检查调研项目！")
                        return false
                    }
                    option_list.push({"id": option_json[i]["id"], "option": check_list})
                }
            }
            var form = new FormData();
            form.append('option_list', JSON.stringify(option_list));
            document.getElementById("loading").style.display = "inline-block";
            var xhr = new XMLHttpRequest();
            xhr.open('post', "/forum/SurveyQuestionnaire.html", true);
            xhr.send(form);
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                    if (xhr.status === 200) {
                        document.getElementById("loading").style.display = "none";
                        var JsonDate = JSON.parse(xhr.responseText);
                        if (JsonDate["code"] === 200) {
                            alert("操作成功！");
                            window.location.reload()
                        } else {
                            alert(JsonDate['message']);
                            window.location.reload()
                        }
                    }
                }
            };
        }
    </script>
{% endblock %}